<template>
  <div class="page-container">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员积分管理</el-breadcrumb-item>
        <el-breadcrumb-item>自定义积分规则列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" :rules="filtersRules">
        <el-row class="search-input">
          <el-row class="times mr30">
            <el-form-item label="创建时间：" prop="startTime">
              <el-date-picker
                v-model="filters.startTime"
                type="datetime"
                placeholder="开始时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                @change="changeStartDate"
                :picker-options="startDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                placeholder="结束时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                @change="changeEndDate"
                :picker-options="endDateDisabled"
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-row class="times mr30">
            <el-form-item label="上线时间：" prop="onlineStartTime">
              <el-date-picker
                v-model="filters.onlineStartTime"
                type="datetime"
                placeholder="开始时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                @change="changeStartDateOnline"
                :picker-options="startDateDisabledOnline"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="onlineEndTime">
              <el-date-picker
                v-model="filters.onlineEndTime"
                type="datetime"
                placeholder="结束时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                @change="changeEndDateOnline"
                :picker-options="endDateDisabledOnline"
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-form-item label="规则名称：" prop="ruleName">
            <el-input
              v-model.trim="filters.customizeRuleName"
              @input="updateVal"
              placeholder="输入规则名称"
              class="w178"
              maxlength="80"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="所属组织：" class="mr10">
            <el-select v-if="this.nowDeptType!=1" v-model="filters.deptId" :disabled="searchDeptDis" clearable placeholder="全部">
              <el-option
                v-for="item in deptOption"
                :key="item.id"
                :label="item.deptName"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select v-if="this.nowDeptType==1" v-model="filters.deptId" :disabled="searchDeptDis" clearable placeholder="全部">
              <el-option
                v-for="item in nowDeptOption"
                :key="item.id"
                :label="item.deptName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规则类型：" prop="ruleType" >
            <el-select v-model.trim="filters.ruleType" clearable placeholder="全部">
              <el-option label="积分获取" value="1"></el-option>
              <el-option label="积分消耗" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="obtainMode" label="是否开放：" >
            <el-select v-model.trim="filters.whetherOpen" clearable placeholder="全部">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row class="search-button-noborder">
          <el-form-item>
            <kt-button :plain="true" :label="'重置'" class="resetButton" @click="resetForm('filters')" icon="el-icon-refresh"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="el-icon-search" :label="'搜索'" class="searchButton" @click="findPageClick(null)" />
          </el-form-item>
          
          <el-form-item class="addDiyGrowthrulesBtn" v-if="addCusDis">
            <kt-button :label="'添加自定义积分规则'" type="primary" @click="handleAdd" />
            <span class="addInfo">!</span>
            <img src="../../../assets/explain.png" class="hiddenImg" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <!--表格内容栏-->
    <!-- <Jic-table
      :height="350"
      :tableList="pageResult"
      :tableHeaderList="filterColumns"
      @findPage="findPage"
      :showBatchDelete="false"
      :showEditOperation="false"
      :showDeleteOperation="whetherDelete"
      :totalSize="totalSize"
      @handleDelete="handleDelete"
      @handleEdit="handleEdit"
      @handlePageChange="handlePageChange"
      @handleSizeChange="handleSizeChange"
      :showSelection="false"
      :sortable="false"
      :showIndex="false"
      :showCheckInfo="true"
      :whetherShowOnline="whetherShowOnline"
      :whetherShowOpen="false"
      :operationWidth="300"
      @showInfo="showInfo"
      @integralOnline="integralOnline"
      @openToMerchant="openToMerchant"
      permsDetail="mem:customizeIntegral:look"
      permsDelete="mem:customizeIntegral:delete"
      permsEdit="mem:customizeIntegral:online"
      permsOpen="mem:customizeIntegral:open"
      ref="JicTable"
    ></Jic-table> -->

      <el-table
        :data="tableList"
        :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
        :highlight-current-row="true"
        :max-height="15000"
        :size="'mini'"
        style="width: 100%"
        class="specialTable"
        :border="false"
        v-loading="loading"
      >
        <el-table-column align="center" label="规则名称"  element-loading-text>
          <template slot-scope="scope">
            <span>{{ scope.row.customizeRuleName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="规则类型"  element-loading-text>
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.ruleType || '-'}}</span> -->
            <span v-if="scope.row.ruleType == 1">积分获取</span>
            <span v-if="scope.row.ruleType == 2">积分消耗</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属组织"  element-loading-text>
          <template slot-scope="scope">
            <span>{{ scope.row.deptName || '-'}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="创建时间"  element-loading-text>
          <template slot-scope="scope">
            <span>{{ scope.row.createTime || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上线时间"  element-loading-text>
          <template slot-scope="scope">
            <span>{{ scope.row.onlineTime || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否开放给商家/店铺"  element-loading-text>
          <template slot-scope="scope">
            <span v-if="scope.row.whetherOpen == 0">否</span>
            <span v-if="scope.row.whetherOpen == 1">是</span>
            <span v-if="scope.row.whetherOpen == null">-</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="开放时间"  element-loading-text>
          <template slot-scope="scope">
            <span>{{ scope.row.openTime || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" align="left" fixed="right" label="操作" width="350" :render-header="renderHeader">
          <template slot-scope="scope">
            <kt-button v-show="whetherDelete"
              @click="handleDelete(scope.row)" type="text" size="mini" style label="删除"  v-if="scope.row.whetherOnline == 2" perms="mem:customizeIntegral:delete">
            </kt-button>
            <kt-button
              @click="showInfo(scope.row)" type="text" size="mini" style label="查看" perms="mem:customizeIntegral:look">
            </kt-button>
            <kt-button v-show="whetherShowOnline"
              @click="integralOnline(scope.row)" type="text" size="mini" style label="上线" v-if="scope.row.whetherOnline == 2" perms="mem:customizeIntegral:online">
            </kt-button>
            <!-- <kt-button
              @click="openToMerchant(scope.row)" type="text" size="mini" style label="开发给商家" v-if="openMerchant" perms="mem:customizeIntegral:open">
            </kt-button> -->

          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="currentChange"
          :current-page="filters.start"
          :page-size="filters.limit"
          :total="totalSize"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
        ></el-pagination>
      </div>
    <!--新增编辑界面-->
    <el-dialog
      :title="'添加自定义积分规则'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @closed="handleClose"
      class="el-dialog-style"
    >
      <el-form
        :model="dataForm"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
      >
        <el-form-item prop="deptNames" v-show="addDeptOperate" class="mb30 pl48">
          <span style="color:red">*</span>
          <span class="color333 font16">所属组织：</span>
          <!-- <el-input v-model.trim="deptNames" :disabled="true" auto-complete="off" clearable></el-input> -->
          <span class="color333 font16">{{deptNames}}</span>
        </el-form-item>
        <el-form-item
          label="所属组织："
          prop="deptName"
          v-show="editDeptOperate"
          label-width="128px"
          class="mb30"
        >
          <el-input v-model.trim="dataForm.deptName" :disabled="true" auto-complete="off" clearable></el-input>
        </el-form-item>

        <el-form-item label="规则类型：" prop="ruleType" label-width="128px" class="mb30">
          <template >
            <el-select v-model="dataForm.ruleType" placeholder="全部" clearable :disabled="checkDis">
              <el-option label="积分获取" value="1"></el-option>
              <el-option label="积分消耗" value="2"></el-option>
            </el-select>
            <!-- <div class="tipInfo">!</div> -->
          </template>
        </el-form-item>
        <el-form-item label="规则名称：" prop="customizeRuleName" label-width="128px" class="mb30">
          <el-input
            v-model.trim="dataForm.customizeRuleName"
            auto-complete="off"
            placeholder="输入规则名称"
            :disabled="checkDis"
            clearable
            maxlength="20"
            @input="updateVal"
          ></el-input>
          <p class="font12 colorE7" style="margin-top:10px;">最多输入20个字符</p>
        </el-form-item>
        <el-form-item label="字母简称：" prop="letterAbbreviation" label-width="128px" class="mb30">
          <el-input
            v-model.trim="dataForm.letterAbbreviation"
            auto-complete="off"
            placeholder="输入规则简称,仅可输入字母和数字"
            :disabled="checkDis"
            maxlength="30"
            oninput="value=value.replace(/[^\w\.\/]/ig,'')"
            clearable
            @input="updateVal"
          ></el-input>
           <p class="font12 colorE7 textWidth200" style="margin-top:10px;">用于接口对接重要参数，请认真填写，不可重复，最多30个字符</p>
        </el-form-item>
        <el-form-item
          label="是否可同时启用："
          prop="whetherSimultaneouslyEnable"
          class="t_r dialogInput_short labelAlignment "
        >
          <el-radio
            v-model="dataForm.whetherSimultaneouslyEnable"
            label="1"
            :disabled="checkDis"
            class="radioAlignment"
          >不可同时启用</el-radio>
          <el-radio
            v-model="dataForm.whetherSimultaneouslyEnable"
            label="2"
            :disabled="checkDis"
            class="radioAlignment"
          >可同时启用</el-radio>
        </el-form-item>
        <!-- <p v-if="this.dataForm.whetherSimultaneouslyEnable == 1"  class="mb20 font12 colorE7 pl127 textWidth200">同一时间同种规则只能启用一个</p>
        <p v-if="this.dataForm.whetherSimultaneouslyEnable == 2"  class="mb20 font12 colorE7 pl127 textWidth200">同一时间同种规则可以启用多个</p> -->
        <p
          v-if="this.dataForm.whetherSimultaneouslyEnable == 1"
          class="mb20 font12 colorE7 pl127 textWidth200"
        >同一时间同种规则只能启用一个</p>
        <p
          v-if="this.dataForm.whetherSimultaneouslyEnable == 2"
          class="mb20 font12 colorE7 pl127 textWidth200"
        >同一时间同种规则可以启用多个</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          :size="size"
          @click.native="dialogVisible = false"
          type="primary"
          plain
          class="btn"
          v-if="whetherOpe"
        >{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
          class="btn"
          v-if="whetherOpe"
        >下一步</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="cancelDialog"
          :loading="editLoading"
          class="btn"
          v-if="canselShow"
        >确定</el-button>
      </div>
    </el-dialog>
    <!-- 下一步弹窗 -->
    <el-dialog
      :title="'添加自定义积分规则'"
      :visible.sync="growthRuleShow"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <div class="positionDes">
        <span class="ruleClass font16">
          <img src="../../../assets/success.png" class="successImg" />
          规则创建成功
        </span>
        <img v-bind:src="imgUrl" />
      </div>
      <div class="positionDes">
        <p>1、创建自定义规则 ---- 2、前端进行开发 ---- 3、运营人员确认并操作上线 ---- 4、添加成长值规则</p>
      </div>
      <div class="positionDes">
        <p>注：需技术开发人员完成开发后才可使用，请及时联系相关人员</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" type="primary" @click.native="actionSure" class="btn">确定</el-button>
      </div>
    </el-dialog>

    <!-- 设置上线时间弹窗 -->

    <el-dialog
      :title="'设置上线时间'"
      :visible.sync="timeDialogShow"
      :close-on-click-modal="false"
      @closed="handleClose"
      class="el-dialog-style"
    >
      <el-form
        :model="dataForm"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="center"
      >
        <el-form-item label="设置上线时间：">
          <el-date-picker
            v-model="dataForm.onlineTime"
            type="datetime"
            placeholder="上线时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            clearable
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          :size="size"
          @click.native="timeDialogShow = false"
          type="primary"
          plain
          class="btn"
        >{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="IntegralOnlineSure" class="btn">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import JicTable from "@/components/jicComponentGallery/MemberIntegralTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
// import { exportExcel } from "@/utils/excel";
export default {
  components: {
    PopupTreeInput,
    JicTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {

    return {
      openMerchant:false,
      startDateDisabledOnline: {},//开始时间限制
      endDateDisabledOnline: {},//结束时间限制
      startDateDisabled: {},//开始时间限制
      endDateDisabled: {},//结束时间限制
      loading:true,
      tableList:[],
      filtersRules: {
          // startTime: [{ validator: checkStartTime, trigger: "change" }],
          // endTime: [{ validator: checkEndTime, trigger: "change" }],
          // onlineStartTime: [{ validator: checkOnlineStartTime, trigger: "change" }],
          // onlineEndTime: [{ validator: checkOnlineEndTime, trigger: "change" }],
        },
      nowDeptType:null,
      nowDeptId:null,
      nowDeptOption:[],
      searchDeptDis:false,
      addCusDis: false, //添加自定义规则按钮是否显示
      pickerOptions: { disabledDate: this.disabledTime }, //当前时间之前禁用
      timeDialogShow: false, //设置上线时间弹窗
      deptMsg: localStorage.getItem("user"), //当前登录组织信息
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
      whetherShowOnline: false, //是否展示上线按钮
      whetherDelete: false,
      whetherOpe: false, //操作按钮是否显示
      canselShow: false, //确定按钮是否显示
      checkDis: false, //是否可编辑
      imgUrl: "",
      childDis: true,
      growthRuleShow: false, //规则创建成功弹窗
      deptOption: [], //所属组织
      memberEdit: true /* 列表栏操作按钮是否显示 */,
      deptDis: true,
      /* 所属组织层级是否展示 */
      addDeptOperate: true,
      editDeptOperate: false,
      /* 新增所属层级 */
      deptTypes: 0,
      deptLevels: "母平台",
      deptLevel: "母平台",
      //当前账号所属组织
      deptNames: null,
      operateDis: true,
      //登录账号所属层级
      //成长值范围 操作控件
      rangeDis: false,
      totalSize: 0,
      size: "small",
      filters: {
        endTime: null,
        startTime: null,
        onlineStartTime: null,
        onlineEndTime: null,
        openStartTime: null,
        openEndTime: null,
        customizeRuleName: null,
        ruleNum: null,
        whetherOpen: null,
        ruleType: null,
      },

      columns: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: [],
      options: {},
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      dataFormRules: {
        ruleType: [
          { required: true, message: "请选择规则类型", trigger: "blur" }
        ],
        customizeRuleName: [
          { required: true, message: "请输入规则名称", trigger: "blur" }
        ],
        letterAbbreviation: [
          { required: true, message: "请输入字母简称", trigger: "blur" }
        ],
        growRangeStart: [
          { required: true, message: "请选择是否可同时启用", trigger: "blur" }
        ]
      },

      // 新增编辑界面数据
      dataForm: {
        whetherSimultaneouslyEnable: "1", // 是否可同时启用
        onlineTime: this.getCurrentTime(), //上线时间
        id: null,
        ruleType:null,
        customizeRuleName:null,
        letterAbbreviation:null,
        growRangeStart:null,
      }
    };
  },
  methods: {

    // 表头添加移上去显示文案
    renderHeader(h, {column}) {
      const inReview = '1、规则保存成功后不可修改； 2、规则上线后不可删除；'
      return h(
        'div', [
          h('span', column.label),
          h('el-tooltip', {
            effect: 'light',
            props: {
              placement: 'top'
            }
          }, [
            h('div', {
              slot: 'content',
              style: {
                'width': '320px',
                 whiteSpace: 'normal',
                'margin-bottom': '5px'
              }
            }, inReview),
            h('i', {
              class: 'el-icon-warning',
              style: 'color: #ffbf5e;margin-left:5px;'
            })
          ],)
        ]
      )
    },

    showButton(){
      if(this.deptType == 1){
        this.whetherDelete=true;
        this.whetherShowOnline=true
        this.openMerchant=true
      }

    },
    changeStartDateOnline: function() {
      var this_ = this;
      this_.endDateDisabledOnline = {
        disabledDate: time => {
          if (this_.filters.onlineStartTime) {
            return time.getTime() <= new Date(this_.filters.onlineStartTime).getTime();
          }
        }
      };
    },
    changeEndDateOnline: function() {
      var this_ = this;
      this_.startDateDisabledOnline = {
        disabledDate: time => {
          if (this_.filters.onlineEndTime) {
            return time.getTime() >= new Date(this_.filters.onlineEndTime).getTime();
          }
        }
      };
    },
    changeStartDate: function() {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: time => {
          if (this_.filters.startTime) {
            return time.getTime() <= new Date(this_.filters.startTime).getTime();
          }
        }
      };
    },
    changeEndDate: function() {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: time => {
          if (this_.filters.endTime) {
            return time.getTime() >= new Date(this_.filters.endTime).getTime();
          }
        }
      };
    },
      //点击搜索，页码重置
    findPageClick(){
      this.pageRequest.pageNum = 1;
      this.findPage();
    },
    // 换页刷新
      currentChange(pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      sizeChange(pageSize) {
        this.pageRequest.pageNum = 1;
        this.pageRequest.pageSize = pageSize;
        this.findPage();
      },
    //时间判断
    checkStartTime: function() {
      let this_ = this;
      let minTime = new Date(this_.filters.startTime).getTime();
      let maxTime = new Date(this_.filters.endTime).getTime();

      if (minTime > maxTime && maxTime != 0) {
        this_.$message({ message: "起始时间不能大于结束时间 ", type: "error" });
        this_.filters.startTime = "";
      }
    },

    checkEndTime: function() {
      let this_ = this;
      let minTime = new Date(this_.filters.startTime).getTime();
      let maxTime = new Date(this_.filters.endTime).getTime();
      if (maxTime < minTime) {
        this_.$message({ message: "结束时间不能小于起始时间 ", type: "error" });
        this_.filters.endTime = "";
      }
    },
    // 获取分页数据
    findPage: function(data) {
      let this_ = this;
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = this.pageRequest.pageNum;
      this_.filters.limit = this.pageRequest.pageSize;
      this_.utils.request.findMemMemberIntegralRuleCustomizePage(
        this_.filters,
        function(res) {
          this_.tableList = res.data.rows;
          this_.totalSize = Number(res.data.total);
          this_.loading=false;
        }
      );
    },

    //左右分页点击
    handlePageChange(params) {
      if (params != null && params.number != null) {
        if (params.number != null) {
          this.pageRequest.pageNum = params.number;
        }

        this.findPage();
      }
    },
    // 换页刷新
    handleSizeChange: function(pageSize) {
      if (pageSize != null) {
        this.pageRequest.pageSize = pageSize.size;
        this.findPage();
      }
    },
    handleClose() {
      this.$refs.dataForm.resetFields();
      this.dataForm={
        whetherSimultaneouslyEnable: "1", // 是否可同时启用
        onlineTime: this.getCurrentTime(), //上线时间
        id: null,
        ruleType:null,
        customizeRuleName:null,
        letterAbbreviation:null,
        growRangeStart:null,
      }
      this.growthRuleShow = false;
      this.dialogVisible = false;
    },

    // 删除
    handleDelete: function(data) {
      this.$confirm("您确定要删除该规则？", "提示", {
        closeOnClickModal: false
      }).then(() => {
        var params = {};
        params.id = data.id;

        var this_ = this;
        this.utils.request.delCustomizeIntegralRule(params, function(res) {
          if (res.data == "1") {
            this_.$message({ message: "删除成功！", type: "success" });
            this_.findPage();
          } else {
            this_.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      });
    },
    //查看按钮
    showInfo: function(data) {
      this.dialogVisible = true;
      this.canselShow = true;
      this.checkDis = true;
      this.whetherOpe = false;
      this.dataForm = data;
      this.dataForm.whetherSimultaneouslyEnable =data.whetherSimultaneouslyEnable + "";
    },
    // 显示新增界面
    handleAdd: function() {
      this.addDeptOperate = true;
      this.editDeptOperate = false;
      this.dialogVisible = true;
      this.operation = true;
      this.canselShow = false;
      this.childDis = false;
      this.whetherOpe = true;
      this.checkDis = false;
    },

    // 显示编辑界面
    handleEdit: function(params) {
      this.addDeptOperate = false;
      this.editDeptOperate = true;
      if (params.deptType == "0") {
        this.deptLevel = "母平台";
      } else if (params.deptType == "1") {
        this.deptLevel = "子平台";
      } else if (params.deptType == "2") {
        this.deptLevel = "商家";
      } else if (params.deptType == "3") {
        this.deptLevel = "店铺";
      }
      this.dialogVisible = true;
      this.operation = false;
      this.dataForm = Object.assign({}, params);
      this.rangeDis = true;
    },
    // 编辑
    submitForm: function() {
      let this_ = this;
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          let params = Object.assign({}, this_.dataForm);
          this.utils.request.addCustomizeIntegraRule(params, function(res) {
            if (res.code == "0000") {
              this_.growthRuleShow = true;
              this_.findPage();
            }
          });
        }
      });
    },
    //创建成功规则取消
    actionSure() {
      let this_ = this;
      this_.$refs["dataForm"].resetFields();
      this_.growthRuleShow = false;
      this_.dialogVisible = false;
    },

    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      this.columns = [
        { prop: "customizeRuleName", label: "规则名称", minWidth: 100 },
        {
          prop: "ruleType",
          label: "规则类型",
          minWidth: 120,
          formatter: function(row, column, cellValue, index) {
            if (cellValue == 1) {
              return "积分获取";
            } else if (cellValue == 2) {
              return "积分消耗";
            } else {
              return "-";
            }
          }
        },
        { prop: "deptName", label: "所属组织", minWidth: 100 },
        { prop: "createTime", label: "创建时间", minWidth: 120 },
        {
          prop: "onlineTime",
          label: "上线时间",
          minWidth: 120,
          formatter: function(row, column, cellValue, index) {
            if (cellValue == null) {
              return "-";
            } else {
              return row.onlineTime;
            }
          }
        }
      ];
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    resetForm(formName) {
      let deptIdNow = null;
      let keys=[];
      if(this.nowDeptType==1){
        deptIdNow = this.nowDeptOption[0].id;
          keys = [
          "startTime",
          "endTime",
          "onlineStartTime",
          "onlineEndTime",
          "openStartTime",
          "openEndTime",
          "ruleName",
          "ruleNum",
          "whetherOpen",
          "customizeRuleName",
          "ruleType",
        ];
      }else{
        //需要校验的key
        keys = [
          "startTime",
          "endTime",
          "onlineStartTime",
          "onlineEndTime",
          "openStartTime",
          "openEndTime",
          "ruleName",
          "ruleNum",
          "whetherOpen",
          "customizeRuleName",
          "deptId",
          "ruleType",
        ];
      }
      let boo = this.seachTableUtils.checkFromIsNull(this.filters, keys);
      if (!boo) {
        return;
      }
      this.filters = {
        endTime: null,
        startTime: null,
        onlineStartTime: null,
        onlineEndTime: null,
        openStartTime: null,
        openEndTime: null,
        ruleName: null,
        ruleNum: null,
        whetherOpen: null,
        deptId:deptIdNow,
      };
      this.findPage();
    },
    //查询当前登录账号适用范围
    getGrowhtScopeInfo() {
      let this_ = this;
      this.utils.request.getGrowhtScopeInfo({}, function(res) {
        if (this_.deptTypes == 2) {
          //当前登录账号是商家账号,
          if (res.scopeApplication == 1) {
            //适用范围是商家
            this_.operateDis = true;
            this_.memberEdit = true;
          } else if (res.scopeApplication == 2) {
            //适用范围是店铺，
            this_.operateDis = false;
            this_.memberEdit = false;
          }
        } else if ((this_.deptTypes = 3)) {
          //当前登录账号是店铺账号
          if (res.scopeApplication == 1) {
            //适用范围是商家
            this_.operateDis = false;
            this_.memberEdit = false;
          } else if (this_.scopeApplication == 2) {
            //适用范围是店铺
            this_.operateDis = true;
            this_.memberEdit = true;
          }
        }
      });
    },
    //查询当前登录账号所属组织
    getDeptNameByDeptId() {
      let this_ = this;
      this_.utils.request.getDeptNameByDeptId({}, function(res) {
        this_.deptNames = res.data;
      });
    },
    //查询当前登录账号所属层级
    getDeptType() {
      let this_ = this;
      this.utils.request.getDeptType({}, function(res) {
        this_.nowDeptType=res.deptType;
        this_.nowDeptId=res.deptId;
        this_.queryNowDeptOption();
        if (res.deptType == 0) {
          this_.operateDis = false;
          this_.whetherDelete = false;
          this_.addCusDis = false;
          this_.searchDeptDis = false
        } else if (res.deptType == 1) {
          this_.addCusDis = true;
          this_.searchDeptDis = true
        } else {
          this_.addCusDis = false;
        }
      });

    },
     //获取子平台列表
      // queryDeptOption(){
      //  let query={}
      //  let this_=this
      //  query.deptType=1;
      //  this_.utils.request.queryDeptList(query,function(res){
      //    if(res.code == '0000'){
      //      this_.deptOption=res.data
      //    }
      //  })
      // },
      queryDeptOption() {
        let query = {};
        let this_ = this;
        this_.utils.request.queryChildDeptidList(query, function(res) {
          if (res.code == "0000") {
            this_.deptOption = res.data;
          }
        });
      },
      queryNowDeptOption(){
       let query={}
       let this_=this;
       query.deptType=this_.nowDeptType;
       query.id=this_.nowDeptId;
       this_.utils.request.queryDeptList(query,function(res){
         if(res.code == '0000'){
           this_.nowDeptOption=res.data
           if(this_.nowDeptType==1){
             let id =this_.nowDeptOption[0].id;
              this_.filters.deptId=id;
           }
         }
       })
      },
    //input框视图强制刷新
    updateVal() {
      this.$forceUpdate();
    },
    cancelDialog() {
      this.dialogVisible = false;
      this.findPage();
    },
    //上线按钮
    integralOnline(data) {
      let this_ = this;
      this_.timeDialogShow = true;
      this_.dataForm.id = data.id;
      this_.dataForm.onlineTime = new Date();
    },
    //设置上线时间确认按钮
    IntegralOnlineSure() {
      let this_ = this;
      if(this_.dataForm.onlineTime != '' && this_.dataForm.onlineTime != null){
      let params = {};
      params.id = this_.dataForm.id;
      params.whetherOnline = 1;
      params.onlineTime = this_.dataForm.onlineTime;
      this_.utils.request.integralOnline(params, function(res) {
        if (res.data == 1) {
          this_.$message({
            message: "上线成功, " + res.msg,
            type: "success"
          });
          this_.timeDialogShow = false;
          this_.findPage();
        } else {
          this_.$message({
            message: "上线失败, " + res.msg,
            type: "error"
          });
          this_.timeDialogShow = false;
          this_.findPage();
        }
      });
       } else {
           this_.$message({
            message: "上线时间不能为空，请重新设置上线时间 " ,
            type: "error"
          });
       }
    },
    //开放给商家按钮
    openToMerchant(data) {
      this.$confirm("您确定要将该规则开放给商家店铺？开放后不可修改", "提示", {
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          let this_ = this;
          if (data.whetherOnline == 2) {
            this_.$message({
              message: "请先上线此规则再进行开放操作",
              type: "error"
            });
          } else {
            let params = {};
            params.id = data.id;
            params.onlineOrOpen = 2;
            this_.utils.request.openIntegralToMerchant(params, function(res) {
              if (res.data == 1) {
                this_.$message({
                  message: "开放成功! ",
                  type: "success"
                });
                this_.findPage();
              } else {
                this_.$message({
                  message: "开放失败! ",
                  type: "error"
                });
                this_.findPage();
              }
            });
          }
        })
        .catch(() => {});
    },
    getCurrentTime() {
      let time = new Date();
      return time;
    },
    disabledTime(time) {
      return time.getTime() < Date.now() - 8.64e7;
    }
  },

  mounted() {
    this.showButton();
    this.findPage();
    this.getDeptType();
    this.getGrowhtScopeInfo();
    this.getDeptNameByDeptId();
    this.queryDeptOption();
  }
};
</script>

<style lang='scss' scoped>
.dialogInput {
  text-align: left;
  /deep/ .el-input {
    width: 400px;
  }
  /deep/ .el-input__inner {
    width: 400px !important;
  }
}
.dialogInput_short {
  text-align: left;
  /deep/ .el-input {
    width: 130px;
    margin-right: 10px;
  }
  /deep/ .el-input__inner {
    width: 130px !important;
  }
  /deep/ .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
}
.connection {
  display: inline-block;
  height: 32px;
  line-height: 32px;
}
.growRangeStart,
.growRangeEnd {
  display: inline-block;
  width: 130px;
}
.positionDes {
  text-align: center;
  margin-top: 2%;
}
.ruleClass {
  font-size: 30px;
}
.btn {
}
.addDiyIntegraRulesBtn {
  position: relative;
  /deep/ .el-button {
    padding: 0 35px 0 15px !important;
  }

  .addInfo {
    display: inline-block;
    width: 20px;
    height: 20px;
    color: #fff;
    background-color: #FDCB0E !important;
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 20px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }
  .addInfo:hover + .hiddenImg {
    display: block;
    transition: all 30s;
  }
  .hiddenImg {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 40px;
    right: 0px;
    z-index: 9999;
    border: 1px solid #000;
    display: none;
  }

  &:hover .hiddenImg {
    display: block;
    transition: all 30s;
  }
}
.tableTips {
  span {
    display: inline-block;
    margin-bottom: 6px;
  }
}
.search-input {
  .times {
    .times-to {
      padding: 0 10px;
      height: 32px;
      line-height: 32px;
      color: #999;
      display: inline-block;
    }
    /deep/ .el-input {
      width: 208px !important;
       .el-input__inner {
        width: 208px !important;
      }
    }
  }
}
.pl48 {
  padding-left: 38px;
}
.addDiyGrowthrulesBtn {
  position: relative;
  /deep/ .el-button {
    padding: 0 35px 0 15px !important;
  }
  .addInfo {
    display: inline-block;
    width: 20px;
    height: 20px;
    color: #fff;
    background-color: #FDCB0E;
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 20px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }
  .addInfo:hover + .hiddenImg {
    display: block;
    transition: all 30s;
  }
  .hiddenImg {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 40px;
    right: 0px;
    z-index: 9999;
    border: 1px solid #000;
    display: none;
  }
}
.colorE7 {
  color: #ffbf5e !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.pl127 {
  padding-left: 127px !important;
}
.textWidth200 {
  width: 200px !important;
}
.font10 {
  font-size: 10px !important;
}
.tipInfo{
        width: 20px;
        height: 20px;
        border-radius: 20px;
        background-color: #FDCB0E;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        font-weight: 700;
      }
</style>
